import React, { useState, useEffect, useMemo } from 'react'

import MapContainer from '../components/MapContain.jsx'
import HeaderView from '../components/HeaderView.jsx'
import MapSearch from '../components/MapSearch'
import { getMap } from '../common/map.js'
const HomeView = () => {
  const [layer, setLayer] = useState()
  const [map, setMap] = useState()
  const LayerChange = (e) => {
    setLayer(() => {
      return e
    })
    console.log(layer)
  }
  useEffect(() => {
    setMap(getMap(true))
  }, [])
  // const [mapIsInit, setMapIsInit] = useState(false)
  // useMemo(() => {
  //   console.log('useMemo', map)
  //   if (map) {
  //     setMapIsInit(true)
  //   }
  // }, [map])
  return (
    <div id="home-container">
      <HeaderView LayerClick={LayerChange} map={map}></HeaderView>

      <MapSearch map={map}></MapSearch>
      <MapContainer layer={layer} map={map}></MapContainer>
    </div>
  )
}

export default HomeView
